<template>
  <div class="pie-chat-container">
    <div ref="pie-chart" class="pie-chart"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import option,{handlerOptions } from "./config.js";
let that;
let gradient = new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
  { offset: 0, color: "rgba(207, 116, 54, 0)" },
  { offset: 1, color: "rgba(207, 116, 54, 0.8)" },
]);
export default {
  name: "data-v-pie",
  props: {
    chartOptions: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    chartOptions: (newVal) => {
      that.setOptions(newVal);
    },
  },
  data() {
    return {
      option,
      chart: null,
      circle: null,
    };
  },
  methods: {
    init() {
      const dom = this.$refs["pie-chart"];
      this.chart = echarts.init(dom);
      this.chart.setOption(this.option);
      window.addEventListener("resize", () => {
        this.chart.resize();
        this.ResizeOtherComponent();
      });
    },
    setOptions(newConfig) {
      handlerOptions(this.chart, newConfig);
    },

    DrawCirlce() {
      let zr = this.chart.getZr();
      const { w, h, cx, cy } = this.getSizeProp();
      this.circle = new echarts.graphic.Circle({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: w * 0.14,
        },
        style: {
          fill: gradient,
        },
      });
      zr.add(this.circle);
    },

    ResizeOtherComponent() {
      const { w, h, cx, cy } = this.getSizeProp();
      this.circle.attr({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: w * 0.14,
        },
      });
    },

    getSizeProp() {
      let w = this.chart.getWidth();
      let h = this.chart.getHeight();
      let cx = w / 2,
        cy = h / 2;
      return { w, h, cx, cy };
    },
  },
  created() {
    that = this;
  },
  mounted() {
    this.init();
    this.DrawCirlce();
  },
};
</script>
<style src='./index.css' scoped></style>